<template>
  <div class="screen-body">
      <div class="screen-left">
        <div :class="{'active': isActive === 'seeAdoctor'}" @click="getPerson('seeAdoctor')">就诊记录</div>
        <div :class="{'active': isActive === 'followUp'}" @click="getPerson('followUp')">随访记录</div>
      </div>
      <div class="screen-right">
        <div v-if="isActive === 'seeAdoctor'">
            <div class="collapse" 
              v-for="(item, index) in seeAdoctor" 
              :key="index" 
            >
              <div class="item-head" @click="handleItem(item, index)">
                <div class="title">
                  <span>{{item.startTime}}</span>
                  <span>医生: {{item.masterUserName}}</span>
                </div>
                <div class="icon">
                  <el-icon v-if="item.isActive"><ArrowDown  /></el-icon>
                  <el-icon v-else><arrow-right  /></el-icon>
                </div>
              </div>
              <div class="item-content" :class="{'show-block': item.isActive}">
                <p>预约：{{item.content}}</p>
              </div>
            </div>
        </div>
        <div v-if="isActive === 'followUp'" >
            <div class="collapse" 
              v-for="(item, index) in followUp" 
              :key="index" 
            >
              <div class="item-head" @click="handleFollowUpItem(item, index)">
                <div class="title">
                  <span>{{item.planTime}}</span>
                  <span>状态: {{item.status}}</span>
                </div>
                <div class="icon">
                  <el-icon v-if="item.isActive"><ArrowDown  /></el-icon>
                  <el-icon v-else><arrow-right  /></el-icon>
                </div>
              </div>
              <div class="item-content " :class="{'flex-wrap': item.isActive}">
                  <div class="one-item">
                    <span class="label">创建人：</span>
                    <span>{{item.createUserName}}</span>
                  </div>
                  <div class="one-item">
                    <span class="label">医生：</span>
                    <span>{{item.doctorName}}</span>
                  </div>
                  <div class="one-item">
                    <span class="label">随访人员：</span>
                    <span>{{item.dealUserName}}</span>
                  </div>
                  <div class="one-item">
                    <span class="label">随访类型：</span>
                    <span>{{item.type}}</span>
                  </div>
                  <div class="one-item">
                    <span class="label">内容：</span>
                    <span>{{item.planContent}}</span>
                  </div>
                  
                  <div class="one-item">
                    <span class="label">结果：</span>
                    <span>{{item.backContent}}</span>
                  </div>
                  <div class="one-item">
                    <span class="label">备注：</span>
                    <span>{{item.remark}}</span>
                  </div>
              </div>
            </div>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { ArrowRight, ArrowDown} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue';
import useRequest from '../../hook/request';

type SeeAdoctorType = {
  startTime: string,
  masterUserName: string,
  content: string,
  isActive: boolean
}

type FollowUpType = {
  planTime: string,
  status: string,
  createUserName: string,
  doctorName: string,
  dealUserName: string,
  planContent: string,
  type: string,
  backContent: string,
  remark: string,
  isActive: boolean,
}
  export default defineComponent({
    components: {
      ArrowRight, ArrowDown
    },
    props: {
      personID: {
        type: String
      }
    },
    setup(props) {
      let id = props.personID
      const list = reactive({
        current: 1,
        size: 10,
        seeAdoctor: <SeeAdoctorType[]>[],
        followUp: <FollowUpType[]>[]
      })
      // 患者记录
      const isActive = ref('seeAdoctor')

      const getPerson = (type: string) => {
        isActive.value = type
      }

      const handleItem = (item:SeeAdoctorType,  index: number) => {
        console.log(item, index)
        list.seeAdoctor[index].isActive = !item.isActive
        console.log(list.seeAdoctor)
      }

      const handleFollowUpItem = (item: FollowUpType, index: number) => {
        list.followUp[index].isActive = !item.isActive
        console.log(item, index)
      }

      const getSeeAdoctor = async() => {
        let params = {
          customerId: id,
          current: list.current,
          size: list.size,  
        }
        let result:any = await useRequest(`sick/record/getCustomerRecordDetailPage`, params, 'POST')
        if(result.code !== 0) return ElMessage.error('就诊记录' + result.msg)
        list.seeAdoctor = result.data.records
        list.seeAdoctor.forEach(i => i.isActive = false )
      }
      

      const getList = async() => {
        let params = {
          customerId: id,
          current: list.current,
          size: list.size,  
        }
        let result:any = await useRequest(`sick/accessLog/getFollowLogPage`, params, 'POST')
        if(result.code !== 0) return ElMessage.error('随访记录' + result.msg)
        list.followUp = result.data.records
        list.followUp.forEach(i => i.isActive = false )
        console.log(result.data)
      }
      

      onMounted(() => {
        getSeeAdoctor()
        getList()
      })

      return {
        ...toRefs(list),
        isActive,
        getPerson,
        handleItem,
        handleFollowUpItem,
      }
    }
  })

</script>

<style lang="scss" scoped>
  .screen-body {
  // border-top: 1px solid $mainColor;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  .screen-left {
    display: flex;
    flex-direction: row;
    & > div {
      
      padding: 8px 15px;
      cursor: pointer;
    }
  }
  .screen-right {
    // padding: 10px;
    // flex: 1;
    // overflow-y: auto;
  }
}

.collapse {
  display: flex;
  flex-direction: column;
  cursor: pointer;

  .item-head {
    height: 40px;
    width: 100%;
    background-color: $a2-Color;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    user-select: none;
  }
  .item-content {
    display: none;
  }

  .flex-wrap {
    display: flex;
    flex-wrap: wrap;

    .one-item {
      padding: 10px;
      .label {
        width: 80px;
        display: inline-block;
      }
    }
  }

  .show-block {
    display: block;
  }
}


</style>